<template>
  <div class="content">
    <div class="add-btn">
      <el-button type="primary" @click="openShowAdd">新增沟通记录</el-button>
    </div>

    <div class="list">
      <div class="item" v-for="(item, index) in communicateData" :key="index">
        <span>{{ item.calendar }}</span>
        <span>{{ item.operatorRole }}</span>
        <span>{{ item.operator }}</span>
        <span>{{ item.communicationDetails }}</span>
        <span>{{ item.form }}</span>
        <span v-show="item.inviteTime">预约到店时间：{{ item.inviteTime }}</span>
        <span v-show="item.inviteTime">预约试听时间：{{ item. listeningTest }}</span>
        <span v-show="item.inviteTime">下次联系时间：{{ item.relationTime }}</span>
      </div>
    </div>
    
    <AddRecord ref="addRecordRef" :visitorId="visitorId" @setRecord="getCommunicationList"/>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import { useRoute } from "vue-router";
import AddRecord from './components/addRecord/addRecord.vue'
const { proxy } = getCurrentInstance()
const route = useRoute()

const visitorId = ref(null)
onMounted(() => {
  visitorId.value = route.params.id
  getCommunicationList()
})

const getCommunicationList = async() => {
  const params = {
    current: 1,
    size: 99999,
  }
  if (visitorId.value) {
    params.visitorId = visitorId.value
  }
  const {code, data} = await proxy.$API.clue.communication.get(params)
  console.log(code);
  if (code == 200) {
    console.log(data);
    communicateData.value = data.records
  }
}
const communicateData = ref([
  {time: "2023-02-16 13:32:40", identity: "超级管理员", name: "张三", content: "将资源分配",  identity_B: "超级管理员", name_B: "李四"}
])

const addRecordRef = ref(null)
function openShowAdd() {
  addRecordRef.value.openDrawer()
}

</script>

<style lang="scss" scoped>
  .content {
    width: 80%;
    .add-btn {
      padding: 15px;
    }
    .list {
      background-color: rgb(229 231 236);
      overflow: hidden;


      .item {
        margin: 34px 0px 0px 13px;
        border-bottom: 1px solid rgb(215, 215, 215);
        background: rgb(255, 224, 224);
        height: 23px;
        line-height: 23px;
        span {
          font-size: 12px;
          color: rgb(46, 77, 93);
          margin-left: 12px;
        }
      }
    }
  }
</style>